<script lang="ts" setup>
import { ref } from 'vue'
import apis from '@/apis';

const familyPrecepts = [
  '敦本务实，崇文重教',
  '孝悌为先，和睦乡里',
  '勤俭持家，耕读传世',
  '忠君报国，清正廉明'
]
</script>

<template>
  <el-card class="clan-info-card">
    <!-- 家族徽章 -->
    <div class="clan-emblem flex justify-center mb-6">
      <div class="emblem-container">
        <div class="emblem-inner">
          <span class="emblem-text">黄氏家族</span>
        </div>
      </div>
    </div>
    
    <!-- 基本信息 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <h2 class="section-title mb-4">家族信息</h2>
        <dl class="info-grid">
          <div class="info-item">
            <dt class="info-label">家族名称</dt>
            <dd class="info-value">黄氏家族</dd>
          </div>
          <div class="info-item">
            <dt class="info-label">地址</dt>
            <dd class="info-value">不知道</dd>
          </div>
          <div class="info-item">
            <dt class="info-label">姓氏</dt>
            <dd class="info-value">黄氏</dd>
          </div>
          <div class="info-item">
            <dt class="info-label">朝代</dt>
            <dd class="info-value">不知道</dd>
          </div>
        </dl>
      </el-col>
      
      <el-col :span="12">
        <!-- <h2 class="section-title mb-4">宗祠信息</h2> -->
        <dl class="info-grid">
          <div class="info-item">
            <dt class="info-label">堂号</dt>
            <dd class="info-value">不知道</dd>
          </div>
          <div class="info-item">
            <dt class="info-label">家族代数</dt>
            <dd class="info-value">不知道</dd>
          </div>
          <div class="info-item">
            <dt class="info-label">家族人数</dt>
            <dd class="info-value">666</dd>
          </div>
          <div class="info-item">
            <dt class="info-label">创建人</dt>
            <dd class="info-value">不知道</dd>
          </div>
          <div class="info-item">
            <dt class="info-label">简介</dt>
            <dd class="info-value">666</dd>
          </div>
        </dl>
      </el-col>
    </el-row>
    
    <!-- 家规走马灯 -->
    <el-carousel 
      :interval="4000" 
      indicator-position="outside"
      class="clan-carousel mt-8"
    >
      <el-carousel-item v-for="(precept, index) in familyPrecepts" :key="index">
        <p class="precept-text" >{{ precept }}</p>
      </el-carousel-item>
    </el-carousel>
  </el-card>
</template>

<style lang="scss" scoped>
.clan-info-card {
  background: linear-gradient(135deg, #f8f4f0 0%, #f0ebe7 100%);
  border: 1px solid #d4c1b3;
  padding: 1.5rem;
}

.emblem-container {
  width: 160px;
  height: 160px;
  border: 3px solid #964b00;
  border-radius: 50%;
  background: #f5e9d7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border: 1px dashed #d4c1b3;
    border-radius: 50%;
  }
}

.emblem-inner {
  width: 120px;
  height: 120px;
  border: 2px solid #964b00;
  border-radius: 50%;
  background: #e8d9c5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px dashed #d4c1b3;
    border-radius: 50%;
  }
}

.emblem-text {
  font-size: 1.8rem;
  font-weight: bold;
  color: #964b00;
  font-family: 'STKaiti', '楷体', 'KaiTi', serif;
}

.section-title {
  font-size: 1.75rem;
  color: #964b00;
  font-weight: bold;
  position: relative;
  padding-left: 1.2rem;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.6rem;
    height: 0.6rem;
    background: #e74c3c;
    border-radius: 50%;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 1.1rem;
  color: #a98c72;
  margin-bottom: 0.3rem;
}

.info-value {
  font-size: 1.2rem;
  color: #5a4a3a;
  font-weight: 500;
}

.clan-carousel {
  height: 12rem;
  border-radius: 1rem;
  background: #f5f0e8;
  border: 2px solid #d4c1b3;
  overflow: hidden;
  
  .el-carousel__container {
    height: 100% !important;
  }
}

.precept-text {
  font-size: 1.8rem;
  line-height: 1.8;
  color: #5a4a3a;
  font-family: 'STSong', '宋体', 'SimSun', serif;
  text-align: center;
  padding: 1.5rem;
  letter-spacing: 0.1rem;
  text-indent: 2rem;
  
  &::first-letter {
    font-size: 2.2rem;
    color: #e74c3c;
  }
}
</style>